<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->
<!-- 配置筛选账户模板信息部分 -->
<template>
    <div class="template-chooser__container">
        <div class="am-form-group">
            <label class="am-form-label am-u-sm-3 am-u-md-2 form-require">消息模板</label>
            <div class="am-u-sm-9 am-u-md-10 am-u-end">
                <select class="select-for-template"></select>
            </div>
        </div>
        <template-content-config v-if="useContent" v-bind:tmpl-data="currentTemplate.template" v-bind:init-config="currentTemplateData" ref="tmplContent"/>
    </div>
</template>

<script>
  require('select2/dist/js/select2.min')
  require('select2/dist/css/select2.min.css')
  import TemplateContentConfig from './TemplateContentConfig'
  import _                     from 'lodash'

  export default {
    name: "TemplateChooserConfig",
    components: {TemplateContentConfig},
    props: {
      useContent: {
        type: Boolean,
        default: true
      },
      elements: {
        type: Array
      },
      currentTemplateData: {
        default: {}
      }
    },
    computed: {
    },
    methods: {
      initSelect2() {
        const $target = $(this.$el).find('.select-for-template')
        $target.select2({
          placeholder: '请选择使用的模板ID',
          data: this.elements
        })
        $target.on('select2:select', (e) => {
          const {data} = e.params
          this.currentTemplate = data
        })
      }
    },
    mounted() {
      this.initSelect2()
    },
    data() {
      const currentTemplate = _.first(_.filter(this.elements, {selected: true}))
      return {
        currentTemplate
      }
    }
  }
</script>

<style scoped>

</style>